<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom :isAppBtn="false"></HeadCustom>
		<view class="wrap">
			<view class="title font46 font-weight">工作经历</view>
			<view class="tips mt16 font32 font-w300">建议填写最近一份工作经历</view>
			<view class="card-wrap">
				<view class="card-item" v-for="(item, index) in workExperienceList" :key="index">
					<view class="tit font26 color-BF8355 flex1">{{item.title}}</view>
					<view class="mt16" v-if="item.type== 'input'">
						<u--input :placeholder="item.placeholder" maxlength="30" border="none" fontSize="34rpx" clearable v-model="fromData[item.key]"
							placeholderStyle="border:none;" placeholderClass="inputPlaceholder" customStyle="customStyle"></u--input>
					</view>
					<view class="mt16" v-else-if="item.type== 'date'">
						<view class="flex1 fboxRow Ycenter font34" @click="jobTime">
							<view class="">
								<text v-if="fromData.gmtStartWork">{{fromData.gmtStartWork.replace('-', '.')}}</text>
								<text v-else class="color-6B707C">{{item.placeholder}}</text>
							</view>
							<text style="margin: 0 10rpx;">-</text>
							<view class="fboxRow Xend">
								<text v-if="fromData.gmtEndWork">{{fromData.gmtEndWork.replace('-', '.')}}</text>
								<text v-else class="color-6B707C">{{item.placeholder}}</text>
							</view>
						</view>
					</view>
					<view v-else class="con mt20 lh50 fboxRow Ycenter" @click="itemTap(item)">
						<view class="flex1 font34 font-ell1">
							<text v-if="fromData[item.key]">{{fromData[item.key]}}</text>
							<text v-else class="color-6B707C">{{item.placeholder}}</text>
						</view>
						<text class="bwfont bw-arrow-right color-ACB4C7 font24"></text>
					</view>
					<view class="line"></view>
				</view>
			</view>
		</view>
		<PickerSofar :visable.sync="isStartDate" :defaultDate="defaultDate" @confirm="dateConfirm"></PickerSofar>
		
		<ModelPublic ref="modelRef" content="您确定要删除吗？" @confirm="delModal" />
		<BottomFixed>
			<view class="btn-group-inner flex1 fboxRow Ycenter Xcenter">
				<view v-if="this.index" class="btn flex1 fboxRow Ycenter Xcenter font30 bg-gray-btn" @click="delTap">删除</view>
				<view class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="save">保存</view>
			</view>
		</BottomFixed>
	</view>
</template>

<script>
	import { timestampToTime, getDate, throttle } from '@/static/js/common.js';
	import PickerSofar from '../components/picker-sofar.vue';
	import {recruitMixins} from '../common/recruit.mixins.js';
	import ModelPublic from '@/components/model-public/index.vue';
	import BottomFixed from '@/components/bottom-btn/fixed.vue'
	export default {
		mixins: [recruitMixins],
		components: { PickerSofar, ModelPublic, BottomFixed},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				workExperienceList: [{
						title: '公司名称',
						placeholder: '请输入公司名称',
						key: 'companyName',
						type: 'input',
						isEmpty: true
					},
					{
						title: '所属行业',
						placeholder: '请选择所属行业',
						key: 'industry',
						type: 'arrow',
						isEmpty: true
					},
					{
						title: '职位名称',
						placeholder: '请输入职位名称',
						key: 'position',
						type: 'input',
						isEmpty: true
					},
					{
						title: '在职时间',
						placeholder: '请选择在职时间',
						key: 'gmtStartWork',
						type: 'date',
						isEmpty: true
					},
					{
						title: '工作内容',
						placeholder: '请输入工作内容',
						key: 'jobContent',
						type: 'arrow',
						isEmpty: true
					},
					{
						title: '所属部门',
						placeholder: '请填写所属部门(选填)',
						key: 'department',
						type: 'input',
						isEmpty: false
					}
				],
				index: '',
				fromData: {
					"companyName": "",
					"department": "",
					"gmtEndWork": "",
					"gmtStartWork": "",
					"industry": "",
					"jobContent": "",
					"position": ""
				},
				isStartDate: false,
				defaultDate: [],
				isCon: false
			}
		},
		computed: {
			startDate() {
				return getDate('start', 60);
			},
			endDate() {
				return getDate('end', 0);
			}
		},
		onLoad(option) {
			if(option && option.index){
				this.index = option.index
			}
			if(option && option.isCon){
				this.isCon = option.isCon == 1 ? true : false
			}
			
		},
		onShow() {
			this.getInit()
		},
		methods: {
			getInit() {
				const workExperience = getApp().globalData.workExperience
				if(workExperience.hasOwnProperty('companyName')){
					this.fromData = workExperience
				}
			},
			jobTime(){
				this.isStartDate = true
				this.defaultDate = [this.fromData.gmtStartWork, this.fromData.gmtEndWork]
			},
			itemTap(e) {
				getApp().globalData.workExperience = this.fromData
				if (e.key == 'jobContent') {
					this.$pageTo('/recruit/user/vita-textarea?pageType=jobContent&index=' + this.index)
				}else if (e.key == 'industry') {
					this.$pageTo('/recruit/common/industry?isCheckbox=0&&pageType=vita')
				}
			},
			delTap(){
				this.$refs.modelRef.show = true
			},
			save: throttle(function (event) {
				uni.showLoading({ title: '保存中', mask: true })
				let state = true
				this.workExperienceList.filter(item=>{
					if(item.isEmpty && !this.fromData[item.key] && state){
						uni.showToast({
							icon: 'none',
							title: item.placeholder
						})
						state = false
					}
				})
				if(state){
					this.loading = true
					const vitaTemp =getApp().globalData.vitaTemp
					if(this.isCon){
						vitaTemp.workExperienceList.splice(this.index, 1, this.fromData)
						this.postSave(vitaTemp, 'back')
					}else{
						vitaTemp.workExperienceList.push(this.fromData)
						this.postSave(vitaTemp, 'back')
					}
				}
			}, 2000),
			delModal(){
				const vitaTemp =getApp().globalData.vitaTemp
				vitaTemp.workExperienceList.splice(this.index, 1)
				this.$refs.modelRef.show = false
				this.postSave(vitaTemp, 'back')
			},
			dateConfirm(e) {				
				this.fromData.gmtEndWork = e[1]
				this.fromData.gmtStartWork = e[0]
				this.isStartDate = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		min-height: calc(100vh);
	}
	.title { line-height: 66rpx; color:var(--contourButtonTextColor) }
	.tips { line-height: 44rpx; color: var(--contentFontLightColor) }
	.tit{color:var(--contentFontDarkColor);}
	.wrap {
		padding: 40rpx;
	}

	.u-textarea {
		background-color: var(--viewBgColor);
	}

	.uni-input {
		padding: 0 32rpx;
		width: 542rpx;
		height: 88rpx;
		background: var(--viewBgColor);
		border-radius: 12rpx;
	}

	.card-wrap {
		padding-top: 64rpx;
	}

	.line {
		margin: 40rpx 0;
		height: 1rpx;
		background: var(--backgroundDivisionColor);
	}

	.btn-group-inner .btn {
		height: 76rpx;
		border-radius: 12rpx;
	}
	.btn-group-inner .btn +.btn{margin-left: 24rpx;}
</style>